import 'package:flutter/material.dart';
import 'package:flutter_hsh/widgets/f_wdigets/extension/f_widget_extension.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../style/style.dart';
import '../../../widgets/f_wdigets/base_widget/f_base_btn.dart';
import '../../../widgets/f_wdigets/f_styles.dart';
import '../../../widgets/my_app_bar.dart';
import 'feedback_logic.dart';

class FeedbackPage extends StatelessWidget {
  final logic = Get.put(FeedbackLogic());

  FeedbackPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
          textTheme: const TextTheme(bodyLarge: TextStyle(fontSize: 15, color: Colors.black)),
          inputDecorationTheme: InputDecorationTheme(
            filled: true,
            fillColor: Colors.white,
            contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
            isDense: true,
            border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(12)),
            hintStyle: TextStyle(fontSize: 15, color: kAppSub2TextColor),
          )),
      child: Scaffold(
        appBar: const MyAppBar(centerTitle: "意见反馈", backgroundColor: Colors.white),
        backgroundColor: kAppColor('#F7F7F7'),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: SingleChildScrollView(
                  padding: const EdgeInsets.symmetric(horizontal: 22),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      // 新增：反馈类型选择
                      Text("选择问题类型", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: kAppColor('#36383E'))).paddingOnly(bottom: 8, top: 32),
                      Obx(() => Wrap(
                        spacing: 12.w,
                        runSpacing: 12.h,
                        children: logic.feedbackTypes.map((type) {
                          bool isSelected = logic.selectedTypeId.value == type.id;
                          return GestureDetector(
                            onTap: () => logic.selectFeedbackType(type.id),
                            child: Container(
                              padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
                              decoration: BoxDecoration(
                                color: isSelected ? kAppMainColor : Colors.white,
                                border: Border.all(
                                  color: isSelected ? kAppMainColor : kAppColor('#E0E0E0'), 
                                  width: 1,
                                ),
                                borderRadius: BorderRadius.circular(20),
                              ),
                              child: Text(
                                type.name,
                                style: TextStyle(
                                  fontSize: 14,
                                  fontWeight: FontWeight.w500,
                                  color: isSelected ? Colors.white : kAppColor('#36383E'),
                                ),
                              ),
                            ),
                          );
                        }).toList(),
                      )).paddingOnly(bottom: 16),
                      
                      Text("请将反馈的问题或建议填入", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: kAppColor('#36383E'))).paddingOnly(bottom: 8, top: 16),
                      Column(
                        children: [
                          TextField(
                            minLines: 8,
                            maxLines: 8,
                            controller: logic.contentController,
                            maxLength: 500,
                            decoration: const InputDecoration(filled: false, counterText: "", hintText: "请输入您的意见或建议，每一条反馈我们都会认真考虑"),
                          ),
                          // Obx(() => Text('${logic.contentCount.value}/500', style: TextStyle(fontSize: 14, color: kAppSub2TextColor))).fAlign(Alignment.centerRight).paddingOnly(bottom: 10, right: 8)
                        ],
                      ).fBgColor(Colors.white, 12),
                      Text("联系方式（必填）", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: kAppColor('#36383E'))).paddingOnly(bottom: 8, top: 16),
                      TextField(
                        controller: logic.contactController,
                        decoration: const InputDecoration(hintText: "请输入手机号"),
                      ).paddingOnly(bottom: 60),
                    ],
                  )),
            ),
            FBaseBtn(
              height: 48,
              decoration: FStyles.bgHGradient(radius: 10),
              onPressed: logic.onTapCommit,
              child: FStyles.btnText('提交'),
            ).paddingOnly(left: 28.w, right: 28.w, bottom: 40, top: 20)
          ],
        ),
      ),
    );
  }
}
